<template>
	<div class="page">
		<div class="top" style="padding-right:0;">
			<div style="float:left;"><span>组态名称：{{viewName}}</span></div>
			<!-- <el-button type="primary" size="small" id="goback" style="margin-left:0.2rem;" @click="goBack">返回</el-button> -->
			<el-button type="primary" size="small" id="goback" style="margin-left:0.2rem;" @click="refreshViewAndData">刷新</el-button>
			<el-button type="primary" size="small" id="goback" style="width:auto;padding-left:0.2rem;padding-right:0.2rem;" v-if="drawList.length>1 && list" @click="hiddenList">隐藏图纸列表</el-button>
			<el-button type="primary" size="small" id="goback" style="width:auto;padding-left:0.2rem;padding-right:0.2rem;" v-if="drawList.length>1 && (!list)"  @click="showList">显示图纸列表</el-button>
			<el-button type="primary" size="small" id="goback" v-if="drawList.length>1 && !isPlay"  @click="swiperStage">图纸轮播</el-button>
			<el-button type="primary" size="small" id="goback" v-if="drawList.length>1 &&  isPlay"  @click="stopTrunView">停止轮播</el-button>
			<el-button type="primary" size="small" id="goback" @click="fullScreen">全屏展示</el-button>
		</div>
		<div class="viewBox_2" v-if="drawList.length>1 && list && (!isFullscreen)">
			<div class="oneView_2 over" :class="nowDraw==item.label?'active':''" v-for="(item,i) in drawList" :key="i" @click="changeStage(item,$event)"><span>{{item.label}}</span></div>
		</div>
		<div class="viewBox" v-if="drawList.length>1 && fullList && isFullscreen">
			<div class="oneView" :class="nowDraw==item.label?'active_2':''" v-for="(item,i) in drawList" :key="i" @click="changeStage(item,$event)"><span>{{item.label}}</span></div>
		</div>
		<!-- <div class="viewBox_rightTop" v-if="list" title="点击移入列表" @click="moveRightTop">
		</div>
		<div class="viewBox_leftTop" v-if="list" title="点击移入列表" @click="moveLeftTop">
		</div>
		<div class="viewBox_leftBottom" v-if="list" title="点击移入列表" @click="moveLeftBottom">
		</div>
		<div class="viewBox_rightBottom" v-if="list" title="点击移入列表" @click="moveRightBottom">
		</div> -->
		<!-- <div v-if="drawName" class="draw_name">{{drawName}}</div> -->
		<iframe v-if="show && viewType==1" :src="'static/optionZT/client_view.html?stageId='+stageId" id="mainIframe" name="mainIframe" ref="content" class="fram"   :class="(drawList.length<=1 || (!list))?'fram_2':''"></iframe>
		<iframe v-if="show && viewType==2" :src="'static/platformZT/client_view.html?stageId='+stageId" id="mainIframe" name="mainIframe" ref="content" class="fram"   :class="(drawList.length<=1 || (!list))?'fram_2':''"></iframe>
	    <!-- <el-button v-if="isFullscreen" type="primary" size="small" class="mapbtn"  @click="fullScreen">全屏切换</el-button> -->
		<div v-if="isFullscreen" class="mapbtn_2">
			<img src="../../static/back.png" title="点击退出全屏" @click="fullScreen"/>
			<img src="../../static/list.png" style="margin-left:0.2rem;" title="显示\隐藏图纸列表" v-if="drawList.length>1" @click="fullList=!fullList"/>
		</div>
		<el-dialog :visible="dialogSwiperVisible" :width="win.screen.width>=1600?'22%':'34%'" append-to-body
			:show-close="close" top="220px">
			<div class="toptit">
				<span>图纸轮播设置</span>
				<span style="float: right; cursor: pointer" @click="dialogSwiperVisible = false">关闭</span>
			</div>
			<el-form :model="swiperForm" style="text-align: left;margin-top:0.3rem;" block>
				<el-form-item label="轮播间隔:" :label-width="formLabelWidth">
					<el-input style="width:3rem" class="swiperInput" v-model="swiperForm.interval" placeholder="30秒至60秒" type="number" :min="30"  :max="600" :step="10"  @change="changeInterval(swiperForm.interval)"></el-input> s
				</el-form-item>
				<el-form-item    label=""  :label-width="formLabelWidth" style="margin-top:-0.3rem;">
					<p style="font-size:0.3rem;color:red;">注:限制30至600秒,默认60秒</p>
				</el-form-item>
			</el-form>
			<div style="text-align: right; margin-top: 0.3rem">
				<el-button type="primary" size="small" @click="showTrunView(swiperForm.interval)">确 认</el-button>
				<el-button size="small" @click="dialogSwiperVisible = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	//import '../../static/optionZT/js/WebSocketClilent.js';
	//import initjson from '../../static/optionZT/config/init.json';
	export default {
			name: 'showView',
			data() {
				return {
					 win:window,
					 url:"",
					 viewType:1,
					 close:false,
					 timer:null,
					 dialogSwiperVisible:false,
					 formLabelWidth:'100px',
					 show:false,
					 //drawName:'',
					 stageId:0,
					 start:0,
					 isPlay:false,
					 list:false,
					 fullList:false,
					 nowDraw:0,
					 isFullscreen:false,
					 viewId:0,
					 viewName:'',
					 drawList:[],
					 swiperForm:{
						 interval:60,
						// type:''
					 }
				}
	
			},
			
			created() {
				this.viewId=localStorage.getItem("editViewId");
				this.viewName=localStorage.getItem("editViewName");
				this.viewType = localStorage.getItem("viewType") || 1;
				if(!localStorage.getItem('attoken') || (!localStorage.getItem('atuser'))){
					this.$router.push({
						path: '/',
						name: 'Login',
						component: 'Login'
					});
					localStorage.clear();
				}
				
			},
			
			mounted(){
				this.showAll();
				//var that=this;
				//这个延时是必须的不然不起作用
				
				//this.showTrunView();
			},
			
			methods: {
				//不在这刷新数据，在组态内部的webSocket中刷新
				// refreshView(){
				// 	this.$http({
				// 			method: 'post',
				// 			url: 'api/view/refresh',
				// 			data: {
				// 				'id':this.viewId
				// 				
				// 				//'keyword': keyword
				// 			}
				// 		}).then(res => {
				// 			if (res && res.data.result == "success") {
				// 				console.log("组态数据刷新成功")
				// 			}
				// 		}).catch(error => {
				// 			console.log(error);
				// 		});
				// },
				changeInterval(interval){
					if(Number(interval)<30){
						this.swiperForm.interval=30;
					}else if(Number(interval)>600){
						this.swiperForm.interval=600;
					}
				},
				
				swiperStage(){
					this.dialogSwiperVisible = true;
				},
				
				showTrunView(interval=60){
					var that=this
					this.isPlay=true;
					this.$message({
						type: 'info',
						message: '组态图纸正在轮播...'
					});
					let time=Number(interval) || 60;
					this.timer=setInterval(function(){
						that.stageId = that.drawList[that.start].value;
						localStorage.setItem("stageId",that.stageId);
						that.start++;
						if(that.start==that.drawList.length){
							that.start=0;
						}
					},time*1000);
					this.dialogSwiperVisible=false;
				},
				
				stopTrunView(){
					var that=this;
					this.isPlay = false;
					this.$message({
						type: 'info',
						message: '组态图纸轮播已停止'
					});
					clearInterval(that.timer);
					this.stageId = this.drawList[0].value;
					localStorage.setItem("stageId",that.stageId);
				},
				
				//图纸整体刷新
				refreshViewAndData(){
					var stageId = localStorage.getItem("stageId")?localStorage.getItem("stageId"):this.stageId;
					if(this.viewType==1){
					    document.getElementById("mainIframe").src='static/optionZT/client_view.html?stageId='+stageId;
					}else{
						 document.getElementById("mainIframe").src='static/platformZT/client_view.html?stageId='+stageId;
					}
					//this.refreshView();
				},
				
				//只刷新组态数据的函数
				refreshViewData(){
					this.$http({
							method: 'post',
							url: 'api/draw/refresh',
							data: {
								'id':this.stageId
							}
						}).then(res => {
							if (res && res.data.result == "success") {
								this.$message({
									type: 'info',
									message: '图纸数据已刷新'
								});
							}
						}).catch(error => {
							console.log(error);
							
							
						});
				},
				
				hiddenList(){
					this.list= false;
					this.$refs.content.style.cssText+=";height:"+(this.$refs.content.offsetHeight+30)+"px!important";
				},
				
				showList(){
					this.list = true;
					this.$refs.content.style.cssText+=";height:"+(this.$refs.content.offsetHeight-30)+"px!important";
				},
				
				goBack(){
					this.$router.push({
						name: 'viewList',
						path: 'viewList',
						component: 'viewList'
					});
				},
				
				// goBack() {
				// 	this.$router.push({
				// 		name: 'configuration',
				// 		path: 'configuration',
				// 		component: 'configuration'
				// 	});
				// },
				
				// moveLeftBottom(){
				// 	this.$refs.viewBox.style.position="absolute";
				// 	this.$refs.viewBox.style.top="auto";
				// 	this.$refs.viewBox.style.right="auto";
				// 	this.$refs.viewBox.style.bottom="40px";
				// 	this.$refs.viewBox.style.left="20px";
				// },
				
				// moveLeftTop(){
				// 	this.$refs.viewBox.style.position="absolute";
				// 	this.$refs.viewBox.style.right="auto";
				// 	this.$refs.viewBox.style.bottom="auto";
				// 	this.$refs.viewBox.style.top="70px";
				// 	this.$refs.viewBox.style.left="20px";
				// },
				
				// moveRightBottom(){
				// 	this.$refs.viewBox.style.top="auto";
				// 	this.$refs.viewBox.style.left="auto";
				// 	this.$refs.viewBox.style.right="30px";
				// 	this.$refs.viewBox.style.bottom="40px";
				// },
				
				// moveRightTop(){
				// 	this.$refs.viewBox.style.position="absolute";
				// 	this.$refs.viewBox.style.bottom="auto";
				// 	this.$refs.viewBox.style.left="auto";
				// 	this.$refs.viewBox.style.top="70px";
				// 	this.$refs.viewBox.style.right="30px";
				// },
				
				//获取数据函数
				showAll() {
					var that = this;
					this.$http({
							method: 'post',
							url: 'api/draw/all',
							data: {
								'view_id':this.viewId
								
								//'keyword': keyword
							}
						}).then(res => {
							if (res && res.data.result == "success") {
								for(var i=0,len=res.data.data.length;i<len;i++){
									var draw={
										value:res.data.data[i].id,
										label:res.data.data[i].draw_name
									}
									this.drawList.push(draw);
								}
								
								this.stageId=this.drawList[0].value;
								this.show=true;
								localStorage.setItem('stageId',that.stageId);
								//this.drawName=this.drawList[0].label;
								this.nowDraw=this.drawList[0].label;
								setTimeout(function(){
								    var oldHeight=that.$refs.content.offsetHeight;
									console.log(oldHeight);
									if(window.innerHeight==window.screen.availHeight-71){
										//document.getElementById("mainIframe").style.height=(1200+30)+'px';
										//that.$refs.content.style.cssText += ";height:calc("+oldHeight+"px - 1rem)!important";
										that.$refs.content.style.cssText += ";height:"+(oldHeight+30)+"px!important";
									}
								},1000)
								//this.refreshView();
								
							}
						}).catch(error => {
							console.log(error);
							this.drawList = [];
							
						});
				},
				
				changeStage(item,event) {
					var that=this;
					if(event.target.innerText==item.label){
						this.nowDraw=item.label;
					}
					this.stageId=item.value;
					//this.drawName=item.label;
					localStorage.setItem('stageId',item.value);
					//this.refreshView();
					setTimeout(function(){
						that.fullList=false;
					},5000)
				},
				
				fullScreen() {
					var that=this;
					this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
					var content = document.documentElement;
					if (!this.isFullscreen) { //进入全屏,多重短路表达式
						(content.requestFullscreen && content.requestFullscreen()) ||
						(content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
						(content.webkitRequestFullscreen && content.webkitRequestFullscreen()) || (content.msRequestFullscreen && content.msRequestFullscreen());
					     this.isFullscreen=true;
						 that.$message({
						 	type: 'info',
							dangerouslyUseHTMLString: true,
							duration:6000,
							offset:400,
						 	message: "<div style='color:#111;'>如需还原请点击<span style='color:red;'>全屏切换</span>按钮,如需进入浏览器全屏请按键盘<span style='color:red;'>ESC</span>键！</div>"
						 });
					} else { //CancelFullScreen?document.mozCancelFullScreen():
						document.exitFullscreen ? document.exitFullscreen() :
						document.mozCancelFullScreen ? document.mozCancelFullScreen() :
						document.mozkitExitFullscreen ? document.webkitExitFullscreen() : '';
					    this.isFullscreen=false;
					}
					if(this.isFullscreen){
						that.$parent.showMenu=false;
						that.$refs.content.removeAttribute("class","fram");
						that.$refs.content.style.position="fixed";
						that.$refs.content.style.top=0;
						that.$refs.content.style.left=0;
						that.$refs.content.setAttribute("frameborder","no");
						that.$refs.content.setAttribute("border","0");
						that.$refs.content.style.width=window.screen.width+'px';
						that.$refs.content.style.height=window.screen.height+'px';
						that.$refs.content.style.backgroundColor="#fff";
						//that.refreshViewAndData();
					}else{
						that.fullList=false;
						that.$parent.showMenu=true;
						that.$refs.content.style.position="relative";
						that.$refs.content.style.top=0;
						that.$refs.content.style.left=0;
						that.$refs.content.setAttribute("class","fram");
						that.$refs.content.style.width="99.4%";
						//that.$refs.mapbtn.style.bottom="1.5rem";
						that.$refs.content.setAttribute("frameborder","1");//1表示为三维边框，0不是三维，no表示不显示边框，yes显示默认边框
						that.$refs.content.setAttribute("border","1");
						if(window.screen.width>=2560){
							that.$refs.content.style.height=1160+"px";
						}else if(window.screen.width>=1920){
							that.$refs.content.style.height=802+"px";
						}else if(window.screen.width<=1600){
							that.$refs.content.style.height=15.6+"rem";
						}
						//that.refreshViewAndData();
					}
				}
			},
			beforeDestroy() {
				var that=this;
				this.$message.closeAll();
				clearInterval(that.timer);
			},
			destroyed() {
				
			}
			
		}
</script>

<style scoped>
	/* @media all and (min-width:2560px) {
		.fram{
			height:1110px!important;
		}
	}
	@media all and (max-width:1920px) {
		.fram{
			height:750px!important;
		}
	}
	@media all and (max-width:1600px) {
		.fram{
			height:14.6rem!important;
		}
	}
	
	@media all and (max-width:1024px) {
		.fram{
			height:14.4rem!important;
		}
	} */
	.page{
		height: inherit;
		position:relative;
	}
	
	.fram{
		float:left;
	    margin-top:0.1rem;
		width:99.4%;
		/* height:750px; */
		height:calc(100% - 1.4rem);
		overflow: auto;
		position:relative;
		transition: all 1s linear;
		z-index:1;
	}
	
	.fram_2{
		margin-top:0.2rem;
		transition: all 1s linear;
	}
	
	.viewBox,
	.viewBox_leftTop,
	.viewBox_rightTop,
	.viewBox_leftBottom,
	.viewBox_rightBottom{
		min-width:200px;
	    position:absolute;
		font-size:0.35rem;
		color:white;
	    /* border:1px solid red; */
		/* background-color:rgba(0,0,0,0.2) ; */
	}
	.viewBox{
		position:fixed;
		top:0.9rem;
		right:0.3rem;
		height:auto;
		/* transition:all 500ms linear; */
		z-index:3;
		
	}
	
	.viewBox_2{
		width:99.4%;
		height:40px;
		color:white;
	    font-size:0.3rem;
		text-align:left;
		/* border:1px solid red; */
		
	}
	
	.oneView{
		width:100%;
		height:0.8rem;
		line-height:0.8rem;
		margin-top:0.2rem;
		background-color:rgba(0,0,0,0.3);
		/*deepskyblue透明度0.5*/
		/* background-color:rgba(0,191,255,1); */
		border-radius:4px;
		padding:0 0.2rem;
	}
	
	.oneView_2{
		max-width:250px;
		min-width:80px;
		float:left;
		height:30px;
		margin-right:0.2rem;
		margin-top:5px;
		line-height:30px;
		padding:0 0.2rem;
		text-align: center;
		/* color:#222; */
		color:#fff;
		/* background-color:rgba(0,0,0,0.8); */
		/*deepskyblue透明度0.5*/
		/* background-color:#ccc; */
		background-color:rgba(0,0,0,0.6);
		/* border-radius:4px; */
		cursor:pointer;
	}
	
	.active{
		/* background-color:rgba(0,191,255,1); */
		/* background-color:rgba(0,0,0,0.6); */
		color:#fff;
		/* border:1px solid deepskyblue; */
		background: linear-gradient(to bottom,#409Eff 50%, deepskyblue);
		/* box-shadow: 0px 0px 0px 5px inset deepskyblue; */
		/* border:1px solid #E6A23C; */
	}
	
	.active_2{
		color:#409Eff;
		background-color:rgba(0,0,0,0.6);
		border:1px solid #409Eff;
	}
	
	/* .oneView_2+.oneView_2{
		margin-left:0.2rem;
	} */
	
	.viewBox_leftTop,
	.viewBox_rightTop,
	.viewBox_leftBottom,
	.viewBox_rightBottom{
		width:150px;
		z-index:2;
		height:3rem;
		background-color:transparent;
	}
	
	.viewBox_rightTop{
		top:80px;
		right:30px;
		cursor:pointer;
		/* border:1px solid red; */
		
	}
	
	.viewBox_leftTop{
		top:80px;
		left:20px;
		cursor:pointer;
		/* border:1px solid red; */
	}
	
	.viewBox_leftBottom{
		bottom:40px;
		left:20px;
		cursor:pointer;
	    /* border:1px solid green; */
	}
	
	.viewBox_rightBottom{
		bottom:40px;
		right:30px;
		cursor:pointer;
		/* border:1px solid red; */
	}
	
	
	
	.draw_name{
		min-width:2rem;
		margin:0 auto;
		font-size:0.45rem;
		height:0.8rem;
		color:white;
		line-height:0.8rem;
		position:absolute;
		left:50%;
		top:1.4rem;
		background-color:rgba(0,0,0,0.5);
		padding:0 0.2rem;
		transform:translateX(-50%);
		z-index:2;
	}
	
	.mapbtn,.mapbtn_2 {
		display: inline-block;
		position:fixed;
		height:0.6rem;
		top: 0.3rem;
		right: 0.3rem;
		z-index: 10000;
		background-color:rgba(0,0,0,0.3)!important;
		border:none;
	}
	
	.mapbtn_2{
		padding:0.1rem;
		max-width:1.8rem;
		display:flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 4px;
	}
	
	.mapbtn_2 img{
		width:0.4rem;
		height:0.4rem;
		cursor: pointer;
	}
		
	
	
	.mapbtn:hover{
		border:1px solid #00b1ff;
		background-color:rgba(0,0,0,0.3)!important;
	}
	
	/* .mapbtn_2:hover{
		border:1px solid #00b1ff;
		background-color:rgba(0,0,0,0.3)!important;
	} */
	
	.swiperInput  /deep/ .el-input__inner{
		padding-right:0;
	}
	
</style>
